<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .btn-outline-black {
            color: black;
            background-color: transparent;
            background-image: none;
            border-color: black;
            border-radius: 30px !important;

        }
    </style>
</head>
<body><nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="ClientMain.html">图书管理系统</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="AssistantBookList.html">图书馆</a></li>
            <li><a href="AssistantOrderList.html">借阅列表</a></li>
            <li><a href="AssistantSellList.html">购买记录</a></li>
            <li><a href="AssistantAddBook.html">添加书籍</a></li>
            <li><a href="index.html">退出登录</a></li>
        </ul>
    </div>
</nav>
<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <label for="number">书号</label>
        <input class="form-control" id="number" placeholder="Search" type="text">
        <label for="name">书名</label>
        <input class="form-control" id="name" placeholder="Search" type="text">
        <label for="author">作者</label>
        <input class="form-control" id="author" placeholder="Search" type="text">
        <label for="publisher">出版社</label>
        <input class="form-control" id="publisher" placeholder="Search" type="text">
        <label for="quantity">数量</label>
        <input class="form-control" id="quantity" placeholder="Search" type="number">
        <label for="price">价格</label>
        <input class="form-control" id="price" placeholder="Search" type="number">
    </div>
    <button class="btn btn-lg btn-outline-black" id="search" type="submit">查找</button>
</form>
<div class="container">
    <table class="table table-hover align-items-center">
        <thead>
        <tr>
            <th scope="col">书号</th>
            <th scope="col">名称</th>
            <th scope="col">作者</th>
            <th scope="col">出版社</th>
            <th scope="col">价格</th>
            <th scope="col">数量</th>
            <th scope="col">是否被借阅</th>
            <th scope="col">是否卖出</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody id="bookList">

        </tbody>
    </table>
</div>

<script src="static/js/jquery.js" type="text/javascript"></script>
<script src="static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script>// 页面加载完成后执行初始化操作
$(document).ready(function () {
    init();
})

function init() {
    getBookList();
    // 绑定搜索按钮点击事件
    const searchButton = document.getElementById("search");
    searchButton.addEventListener("click", function () {
        searchBooks();
    });
}


function getBookList() {
    // 发送AJAX请求获取图书列表
    $.ajax({
        url: "BookListServlet",
        type: "GET",
        dataType: "json",
        success: function (data) {
            addBookList(data);
            console.log(data);
        },
        error: function (xhr, status, error) {
            // 处理发生错误时的情况
            console.log("Error: " + error);
        }
    });
}

function searchBooks() {
    event.preventDefault()
    // 获取搜索关键字
    const number = document.getElementById("number").value;
    const name = document.getElementById("name").value;
    const author = document.getElementById("author").value;
    const publisher = document.getElementById("publisher").value;
    const quantity = document.getElementById("quantity").value;
    const price = document.getElementById("price").value;

    // 发送AJAX请求
    $.ajax({
        url: "BookListServlet",
        type: "GET",
        data: {
            number: number,
            name: name,
            author: author,
            publisher: publisher,
            quantity: quantity,
            price: price
        },
        dataType: "json",
        success: function (data) {
            // 添加搜索结果到表格
            addBookList(data);
        },
        error: function (xhr, status, error) {
            console.log("Error: " + error);
        }
    });
}

function addBookList(data) {
    // 获取 tbody 元素
    const tbody = document.getElementById("bookList");
    tbody.innerHTML = "";
    // 创建文档片段，用于减少DOM操作次数
    const fragment = document.createDocumentFragment();

    // 创建删除按钮的点击事件处理函数
    function deleteButtonClickHandler(number) {
        deleteBook(number);
    }

    // 创建修改按钮的点击事件处理函数
    function editButtonClickHandler(number) {
        editBook(number);
    }

    // 遍历数据数组，并添加每个书籍的信息到表格行中
    data.forEach(book => {
        // 创建新的表格行
        const row = document.createElement("tr");

        // 创建单元格并设置内容
        const cells = [
            book.number,
            book.name,
            book.author,
            book.publisher,
            book.price,
            book.quantity,
            book.isBorrow ? "是" : "否",
            book.isSell ? "是" : "否"
        ].map(content => {
            const cell = document.createElement("td");
            cell.textContent = content;
            return cell;
        });

        // 添加删除按钮
        const deleteButton = createButton("删除", () => {
            deleteButtonClickHandler(book.number);
        });

        // 添加修改按钮
        const editButton = createButton("修改", () => {
            editButtonClickHandler(book.number);
        });

        cells.push(deleteButton, editButton);

        // 将单元格添加到行中
        cells.forEach(cell => {
            row.appendChild(cell);
        });

        // 将行添加到文档片段中
        fragment.appendChild(row);
    });

    // 将文档片段中的内容一次性添加到表格中
    tbody.appendChild(fragment);
}

// 创建按钮并添加点击事件监听器
function createButton(text, clickHandler) {
    const button = document.createElement("button");
    button.textContent = text;
    button.addEventListener("click", clickHandler);
    return button;
}


function deleteBook(number) {
    $.ajax({
        url: 'BookDeleteServlet',
        type: 'POST',
        dataType: 'json',
        data: {
            number: number
        },
        success: function (data) {
            // 删除成功后的处理逻辑
            console.log('删除成功：' + number);
            // 重新获取图书列表
            getBookList();
        },
        error: function (xhr, status, error) {
            // 删除失败后的处理逻辑
            console.error('删除失败：' + number + '，错误信息：' + error);
        }
    });
}

function editBook(number) {
    window.location.href = 'AssistantModifyBooks.html?number=' + number;
}
</script>

</body>
</html>